/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import { FlatList, ScrollView, StyleSheet } from 'react-native';
import styled from 'styled-components';
import { Actions } from 'react-native-router-flux';
import { getToken } from '../../utils/auth';
import { getMessList } from '../../api';
import { Flex } from 'antd-mobile-rn';
import img_arr from './img_arr';

let params = {
  prisonNo: '',
  topic: ''
};
class Message extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
      isRefreshing: false, // 下拉控制
      url: ''
    };
  }
  getInfoList(params, token) {
    getMessList(params, token)
      .then(res => {
        if (res.code === '0') {
          this.setState({
            list: res.data
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
  componentDidMount() {
    const { policeBaseInfoVo } = this.props;

    params = {
      prisonNo: policeBaseInfoVo.cusNumber,
      topic: policeBaseInfoVo.policeId
    };
    getToken().then(token => {
      this.getInfoList(params, token);
    });
  }
  _onRefresh = () => {
    this.setState({ refreshing: true });
    getToken().then(token => {
      this.getInfoList(params, token);
    });
  };
  render() {
    return (
      <Container>
        <Header>
          <HeaderTitle>消息</HeaderTitle>
        </Header>
        <Content>
          {this.state.list.length ? (
            <ScrollView
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                paddingBottom: 180
              }}>
              <FlatList
                refreshing={this.state.isRefreshing}
                onRefresh={this._onRefresh}
                data={this.state.list}
                renderItem={({ item }) => (
                  <OnTouchableOpacity
                    onPress={() => {
                      Actions.detail({ id: item.id, t_name: item.name });
                    }}>
                    <UserBox>
                      <UserPrefix style={[item.id === 0 ? styles.active : '']}>
                        <Images
                          source={require('../../assets/message/shengji.png')}
                        />
                      </UserPrefix>
                      <UserImage source={img_arr[item.name]} />
                      <UserName key={item.id}>
                        <TitleBox>
                          <Title>{item.name}</Title>
                          <Time>{item.lastTime}</Time>
                        </TitleBox>
                        <TitleBox>
                          <TextContent>{item.lastInfo}</TextContent>
                          {item.id === 0 ? (
                            <Point />
                          ) : item.num !== 0 ? (
                            <Icon>{item.num}</Icon>
                          ) : (
                            <I />
                          )}
                        </TitleBox>
                      </UserName>
                    </UserBox>
                  </OnTouchableOpacity>
                )}
              />
            </ScrollView>
          ) : (
            <NoRecentContacts>无最新消息</NoRecentContacts>
          )}
        </Content>
      </Container>
    );
  }
}

export default Message;

const Container = styled.View`
  width: 100%;
  height: 100%;
  padding-top: 30;
  padding-left: 14;
  padding-right: 14;
  background-color: white;
`;

const Header = styled.View`
  height: 65;
  width: 100%;
  background-color: white;
`;

const HeaderTitle = styled.Text`
  color: #070707;
  font-size: 30;
`;

const Content = styled.View`
  width: 100%;
  height: 100%;
  background-color: white;
`;
const UserBox = styled.View`
  flex-direction: row;
  align-items: center;
`;
const UserPrefix = styled.View`
  width: 43;
  height: 43;
  border-radius: 43;
  justify-content: center;
  align-items: center;
  margin-right: 14.33;
  display: none;
  background-color: #ff8f67;
`;
const UserImage = styled.Image`
  width: 43;
  height: 43;
  margin-right: 14.33;
`;
const Images = styled.Image``;
const UserName = styled.View`
  padding-top: 9.67;
  padding-bottom: 9.67;
  width: 100%;
  color: #333333;
  font-size: 15.33;
  border-bottom-width: 1;
  border-bottom-color: #ededed;
`;
const TitleBox = styled.View`
  flex-direction: row;
  align-items: center;
  padding-right: 65;
`;
const Title = styled.Text`
  font-size: 16;
  color: #333333;
`;
const Time = styled.Text`
  font-size: 10;
  color: #999999;
  margin-left: auto;
`;
const TextContent = styled.Text`
  font-size: 12;
  color: #999999;
  padding-top: 5;
`;
const I = styled.Text``;
const Icon = styled.Text`
  width: 13.33;
  height: 13.33;
  background-color: #ff634e;
  color: #fff;
  border-radius: 13.33;
  line-height: 13.33;
  text-align: center;
  font-size: 8;
  margin-top: 4;
  margin-left: auto;
`;
const Point = styled.Text`
  width: 6.67;
  height: 6.67;
  border-radius: 6.67;
  background-color: #ff634e;
  margin-top: 4;
  margin-left: auto;
`;
const NoRecentContacts = styled.Text`
  padding-top: 20;
  text-align: center;
`;
const OnTouchableOpacity = styled.TouchableOpacity``;
const styles = StyleSheet.create({
  active: {
    display: 'flex'
  }
});
